<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*公共设置*/
        *,
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            /*box-sizing: border-box;*/
            margin: 0;
            border: none;
            padding: 0;
            font: inherit;
            font-size: 100%;
            vertical-align: baseline;
            color: inherit;
        }
        a{
            text-decoration: none;
        }
        body{
            font-family: 微软雅黑, Arial, Helvetica;
            font-size: 14px;

        }
        ul,li{
            list-style: none;
        }
        /*重用率较高的样式*/
        .box1050{
            width:1050px;
            margin:0 auto;
        }
        .float-l{
            float:left;
        }
        .float-r{
            float:right;
        }
        /*head样式设置*/
        .top {
            padding-top:8px;
            height: 32px;
            border-bottom: 1px solid #e7e7e7;
        }
        .top .phone,.top .email{
            height:25px;
            line-height:25px;
            padding-left:35px;
        }
        .top .phone{
            background:url("img/phone.png") no-repeat;
            padding-right:15px;
            margin-right:15px;
            border-right: 1px solid #000000;
        }
        .top .email{
            background:url("img/e.png") no-repeat;
        }
        /*导航菜单*/
        .menu{
            overflow: hidden;
            height:100px;
            /*background:#0000cc;*/
        }
        .logo{
            padding-top:5px;
        }
        .link{
            padding-top:36px;
            float:right;
        }
        .link li{
            font-weight:500;
            font-size: 14px;
            color:#000000;
            text-align: center;
            padding:0 22px;
            float:left;
        }
        .link li span{
            font-weight:200!important;
            font-size:10px!important;
            color:#8a8a8a!important;
        }
        .link li:hover{
            color:#d70c19;
        }
        /*js轮播图*/
        #jsbox{ width:100%; height:500px; position:relative; overflow:hidden; clear:both; margin-bottom:25px;}
        #jsbox .jsbox_img{ width:1920px; height:500px; position:absolute; left:0; top:0;}
        #jsbox .jsbox_img li{ float:left;}
        #jsbox .jsbox_img img{ width:100%; height:500px; display:block;}
        #jsbox .jsbox_num{ position:absolute;top:460px; margin:0 auto; padding:0;}
        #jsbox .jsbox_num li{  float:left;display:block;}
        #jsbox .jsbox_num li.num_background{background:#d70c19;width:12px; height:12px; display:block; margin:6px;}
        #jsbox .jsbox_num li { width:12px; height:12px; display:block; margin:6px;background:#615e5a; border-radius:10px;}
        /*主要内容*/
        #content{

        }
        .product{
            padding-bottom:35px;
            text-align:center;
        }
        .product-menu{
            background:url(img/product-title.png) no-repeat 0 10px;
            margin:35px 0 65px 0;
            height:35px;
            line-height:35px;
            border-bottom:1px solid #000000;
            border-top:1px solid #000000;
        }
        .product-menu ul{
            float:right;
        }
        .product-menu li{
            float: left;
        }
        .product-menu li a:hover{
            color:red;
        }
        .product-list{
            overflow: hidden;
            width:1064px;
        }
        .product-list li{
            margin:15px 14px 0 0;
            float: left;
            width:232px;
            padding:9px;
            border:1px solid #8a8a8a;
            height:182px;
        }
        .product-list li span{
            line-height: 30px;
        }
        .page{
            margin:0 auto;
            overflow: hidden;
            padding-top:26px;
        }
        .page li{
            text-align: center;
            float:left;
            margin:0 4px;
        }
        .page a{
            border-radius: 3px;
            display:block;
            width:23px;
            height:23px;
            line-height:23px;
            cursor:pointer;
        }
        .page a.page-n:hover{
            color:#FFFFFF;
            background:#252e3d;
            text-align: center;
        }
        .page .page-l{
            background:url(img/page-l.png) no-repeat 0 4px;
        }
        .page .page-r{
            background:url(img/page-r.png) no-repeat 15px 4px;
        }

        /*底部部分*/
        #bottom{
            color:#FFFFFF;
            text-align: center;
            height:240px;
            background:#d70c19;
        }
        #bottom .menu{
            height:20px;
            line-height: 20px;
            padding:40px 0 20px 0;
            width:350px;
            margin:0 auto;
        }
        #bottom .menu li{
            float: left;
        }
        #bottom .info{
            border-top:1px solid #FFFFFF;
        }
        #bottom .info .text{
            padding:15px 0 50px 0;
            color:#eb9fa1;
        }
        #bottom .info .phone{
            margin:0 auto;
            width:230px;
            padding-left: 20px;
            height:34px;
            line-height: 34px;
            border-radius:50px;
            background:url("img/phone-bottom.png") #c3000d no-repeat 25px 5px ;
            font-size: 20px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jsimg.js" ></script>
</head>
<body>
<div id="head">
    <div class="top">
        <div class="box1050 contact">
            <p class="float-l phone">
                0532-86865862
            </p>
            <p class="float-l email">
                qiche@163.com
            </p>
        </div>
    </div>
    <div class="menu box1050">
        <div class="logo float-l">
            <img src="img/logo.png"/>
        </div>
        <ul class="link">
            <li><a href="javascript:void(0);">网站首页<br/><span>HOME</span></a></li>
            <li><a href="javascript:void(0);">公司简介<br/><span>COMPANY</span></a></li>
            <li><a href="javascript:void(0);">产品中心<br/><span>PRODUCT</span></a></li>
            <li><a href="javascript:void(0);">新闻中心<br/><span>NEWS</span></a></li>
            <li><a href="javascript:void(0);">联系我们<br/><span>CONTACT</span></a></li>
        </ul>
    </div>
</div>
<div id="jsbox">
    <ul class="jsbox_img">
        <li><a href="#"><img src="img/ppt1.png"/></a></li>
        <li><a href="#"><img src="img/ppt2.png"/></a></li>
    </ul>
    <div class="jsbox_num">
        <li class="num_background"><a href="#"></a></li>
        <li><a href="#"></a></li>
    </div>
</div>
<div id="content">
    <div class="product box1050">
        <h2><img src="img/product.png"/></h2>
        <div class='product-menu'>
            <ul>
                <li><a href="javascript:void(0)">全部</a></li>
                <li>&nbsp;|&nbsp;</li>
                <li><a href="javascript:void(0)">分类1</a></li>
                <li>&nbsp;|&nbsp;</li>
                <li><a href="javascript:void(0)">分类2</a></li>
            </ul>
        </div>
        <ul class='product-list'>
            <li>
                <a href="javascript:void(0)"><img src="img/list.png"/></a>
                <span>热门产品1</span>
            </li>
            <li>
                <a href="javascript:void(0)"><img src="img/list.png"/></a>
                <span>热门产品1</span>
            </li>
            <li>
                <a href="javascript:void(0)"><img src="img/list.png"/></a>
                <span>热门产品1</span>
            </li>
            <li>
                <a href="javascript:void(0)"><img src="img/list.png"/></a>
                <span>热门产品1</span>
            </li>
            <li>
                <a href="javascript:void(0)"><img src="img/list.png"/></a>
                <span>热门产品1</span>
            </li>
            <li>
                <a href="javascript:void(0)"><img src="img/list.png"/></a>
                <span>热门产品1</span>
            </li>
            <li>
                <a href="javascript:void(0)"><img src="img/list.png"/></a>
                <span>热门产品1</span>
            </li>
            <li>
                <a href="javascript:void(0)"><img src="img/list.png"/></a>
                <span>热门产品1</span>
            </li>
        </ul>
        <ul class="page">
            <li><a class="page-l"></a></li>
            <li><a class="page-n">1</a></li>
            <li><a class="page-n">2</a></li>
            <li><a class="page-n">3</a></li>
            <li><a class="page-n">4</a></li>
            <li><a class="page-r"></a></li>
        </ul>
    </div>
</div>
<div id="bottom">
    <div style="width:750px; margin:0 auto; text-align: center">
        <ul class="menu">
            <li><a>网站首页&nbsp;/</a></li>
            <li><a href="#">&nbsp;公司简介&nbsp;/</a></li>
            <li><a>&nbsp;新闻中心&nbsp;/</a></li>
            <li><a>&nbsp;产品中心&nbsp;/</a></li>
            <li><a>&nbsp;联系我们</a></li>
        </ul>
        <div class="info">
            <p class="text">京ICP备11017824号-4 / 京ICP证130164号/北京市公安局朝阳分局备案编号:110105000501</p>
            <p class="phone">0532-86865862</p>
        </div>
    </div>
</div>
<script>
    widths=($(window).width())*0.49;
    $('.jsbox_num').css('left',widths)
</script>
</body>
</html>